{% extends 'base.html' %}

{% block title %}用户注册 - 项目管理系统{% endblock %}

{% block styles %}
<style>
    /* 隐藏侧边栏 */
    aside {
        display: none !important;
    }
    
    /* 调整主内容区域边距 */
    div.ml-56 {
        margin-left: 0 !important;
        width: 100%;
    }
    
    /* 调整主内容区域 */
    .ml-\[250px\] {
        margin-left: 0 !important;
    }
    
    /* 隐藏顶部导航栏的用户菜单和消息中心 */
    .relative.group, .relative:nth-child(1) {
        display: none !important;
    }
    
    /* 隐藏顶部导航栏标题 */
    header div:first-child {
        display: none !important;
    }
    
    /* 隐藏顶部导航栏 */
    header {
        display: none !important;
    }
    
    /* 自定义注册页面样式 */
    .register-container {
        background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 20px 0;
    }
    
    .register-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
        width: 100%;
        max-width: 420px;
        overflow: hidden;
    }
    
    .register-header {
        background: #165DFF;
        padding: 30px 20px;
        text-align: center;
    }
    
    .register-form {
        padding: 30px;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-control {
        border: 1px solid #e1e4e8;
        border-radius: 8px;
        padding: 12px 15px;
        font-size: 16px;
        transition: all 0.3s;
        width: 100%;
    }
    
    .form-control:focus {
        border-color: #165DFF;
        box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1);
        outline: none;
    }
    
    .input-group {
        position: relative;
    }
    
    .input-icon {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #6B7280;
    }
    
    .input-with-icon {
        padding-left: 45px;
    }
    
    .btn-register {
        background: #165DFF;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 12px 20px;
        font-size: 16px;
        font-weight: 500;
        width: 100%;
        cursor: pointer;
        transition: all 0.3s;
    }
    
    .btn-register:hover {
        background: #0D47CC;
    }
    
    .btn-back {
        background: #6B7280;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 12px 20px;
        font-size: 16px;
        font-weight: 500;
        width: 100%;
        cursor: pointer;
        transition: all 0.3s;
        margin-top: 10px;
    }
    
    .btn-back:hover {
        background: #4B5563;
    }
    
    .alert {
        border-radius: 8px;
        padding: 12px 15px;
        margin-bottom: 20px;
        font-size: 14px;
    }
    
    .alert-success {
        background-color: #F0FDF4;
        color: #166534;
        border: 1px solid #BBF7D0;
    }
    
    .alert-error {
        background-color: #FEF2F2;
        color: #B91C1C;
        border: 1px solid #FECACA;
    }
</style>
{% endblock styles %}

{% block content %}
<div class="register-container">
    <div class="register-card">
        <!-- 注册头部 -->
        <div class="register-header">
            <h2 class="text-2xl font-bold text-white mb-1">用户注册</h2>
            <p class="text-white/80">普祐科技</p>
        </div>
        
        <!-- 注册表单 -->
        <div class="register-form">
            <!-- 消息提示 -->
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="alert {% if category == 'error' %}alert-error{% else %}alert-success{% endif %}">
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
            
            <form method="POST">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <!-- 用户名输入 -->
                <div class="form-group">
                    <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                    <div class="input-group">
                        <i class="fas fa-user input-icon"></i>
                        <input type="text" 
                               id="username" 
                               name="username" 
                               required 
                               placeholder="请输入用户名" 
                               class="form-control input-with-icon"
                        />
                    </div>
                </div>
                
                <!-- 邮箱输入 -->
                <div class="form-group">
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                    <div class="input-group">
                        <i class="fas fa-envelope input-icon"></i>
                        <input type="email" 
                               id="email" 
                               name="email" 
                               required 
                               placeholder="请输入邮箱" 
                               class="form-control input-with-icon"
                        />
                    </div>
                </div>
                
                <!-- 密码输入 -->
                <div class="form-group">
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                    <div class="input-group">
                        <i class="fas fa-lock input-icon"></i>
                        <input type="password" 
                               id="password" 
                               name="password" 
                               required 
                               placeholder="请输入密码" 
                               class="form-control input-with-icon"
                        />
                    </div>
                </div>
                
                <!-- 确认密码输入 -->
                <div class="form-group">
                    <label for="confirm_password" class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
                    <div class="input-group">
                        <i class="fas fa-lock input-icon"></i>
                        <input type="password" 
                               id="confirm_password" 
                               name="confirm_password" 
                               required 
                               placeholder="请再次输入密码" 
                               class="form-control input-with-icon"
                        />
                    </div>
                </div>
                
                <!-- 注册按钮 -->
                <div class="form-group">
                    <button type="submit" class="btn-register">
                        注册
                    </button>
                </div>
                
                <!-- 返回登录按钮 -->
                <div class="form-group">
                    <a href="{{ url_for('auth.login') }}" class="btn-back" style="display: block; text-align: center; text-decoration: none;">
                        返回登录
                    </a>
                </div>
            </form>
        </div>
        
        <!-- 页脚 -->
        <div class="px-6 py-4 bg-gray-50 text-center border-t border-gray-100">
            <small class="text-gray-500">© 2025 普祐科技. 保留所有权利.</small>
        </div>
    </div>
</div>
{% endblock content %}